<!-- 赠送成功页面 -->
<template>
  <div class="page-container">
    <div class="content-box">
      <!-- 背景图 -->
      <van-image class="back-img" :src="require('@/assets/sendBack.png')" />
      <div class="float-box">
        <div class="info-box">
          <div class="en-text">Send  Successfully</div>
          <div class="cn-text">发送成功</div>
          <div class="back-btn">
            <van-button
              :loading="sendLoad"
              round
              type="info"
              size="normal"
              color="linear-gradient(143deg, #FF9AFF -13.21%, #FF337F 107.99%)"
              class="btn"
              @click="back()"
            >To Send More / 再次赠送</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant'
export default {
  components: { VanImage },
  data() {
    return {}
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.page-container {
  overflow: auto;
}
.content-box {
  width: 100%;
  position: relative;
  .float-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.info-box {
  width: 80%;
  position: absolute;
  top: 30% ;
  padding: 0 10%;
  color: #fff;
  text-align: center;
  .en-text{
    color: #FFF;
    font-family: Poppins;
    font-size: 66px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
  }
  .cn-text{
    color: #FFF;
    font-family: Inter;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 179px;
  }
}

/* 隐藏滚动条的整个容器 */
.page-container {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;  /* Firefox */
}
/* 针对Webkit内核浏览器的隐藏滚动条样式 */
.page-container::-webkit-scrollbar {
  display: none;
}
</style>
